<template>
<!-- 这是设计师页面 -->
    <div id="stylist">
        <el-container>
            <el-header><Header></Header></el-header>
            <el-main>
                <div class="content_bottom">
                        <!-- 设计师，设计分类导航栏 -->
                        <div class="top_text">
                        <h1><span>{{$t("category.Brand.title")}}</span></h1>
                    </div>
                        <div class="bottom_category">
                            <ul class="category_ul" >
                                <li class="tuijian" @click="tuijian">{{$t("category.recommend")}}</li>
                                <li class="tuijian" @click="all">{{$t("category.whole")}}</li>
                                
                                <li v-for="item in info" :key="item.category_id" >
                                    <el-dropdown>
                                    <span class="el-dropdown-link"  >
                                        {{item.category_name}}
                                    </span>
                                    <el-dropdown-menu slot="dropdown" >
                                        <el-dropdown-item v-for="datas in item.child" :key="datas.category_id" @click.native="select(datas.category_id)" class="dropdown_text">{{datas.category_name}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                    </el-dropdown>
                                </li>
                            </ul>
                            <!-- 推荐 -->
                            <!-- <div class="category_obj" v-show="designBool">
                                <ul class="bottom_ul">
                                    <li v-for="item in data" :key="item.goods_id" @click="recommend(item.goods_id)">
                                        <img :src="url+item.goods_image" alt="">
                                        <p>{{item.title}}</p>
                                        <span>{{item.min_price}} 元</span>
                                    </li>
                                </ul>
                            </div> -->
                            <!-- 全部设计师 -->
                            <div class="category_obj">
                                <ul class="bottom_ul">
                                    <li v-for="item in data" :key="item.designer_id" @click="details(item.designer_id)">
                                        <img :src="url+item.designer_image" alt="">
                                        <p class="ul_p">{{item.designer_name}}</p>
                                    </li>
                                </ul>
                            </div>
                            <!-- 分页 -->
                            <div class="pagination" v-show="pagBool">
                                <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="totals">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                <div id="kind_content">
                    <div class="content_top">
                        
                    <div class="top_parentBox">
                        <video
                            class="index_video_hight"
                            src="../../../public/mp4/0611(18).mp4"
                            loop="loop"
                            muted
                            autoplay="autoplay"
                        ></video>
                    </div>
                    </div>
                    
                </div>
            </el-main>
            <el-footer><Footer></Footer></el-footer>
        </el-container>
    </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
export default {
    data () {
        return {
            currentPage: 1, //默认第一页
            pageSize: 9,  //每页显示多少条数据
            totals: 0,   //一共多少条数据
            pagBool: true,  //分页的显示隐藏
            // designBool: true, //设计师全部的显示隐藏
            // fenleiID: '',   //分类id,请求分页使用
            allID: '1262',  //设计师id
            data: [],   //推荐和设计师数据
            info: [],   //设计师导航栏
            url: "https://mp.uekea.cn/attachment/",
            activeName: 'second',
           
        }
    },
    components: {
        Header,
        Footer,
    },
    methods: {
        // 跳到商品列表
        recommend(id) {
            this.$router.push({"path":'./goodsDetail',query: {id: id}})
        },
        // 跳到设计师详情页面
        details(id) {
            this.$router.push({"path":"./designerDetails",query: {id: id}})
        },
        // 选择分类，请求商品
        select(id) {
            var _this = this;
            // _this.fenleiID = id;
            _this.designBool = true;   //显示商品
            // 商品请求数据
            _this.$get(`goods/list/category/${id}`).then(res=>{
                if(res.code == 200) {
                    if(res.data.goodsList.length == 0) {
                        _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');  //没有数据
                    }
                    _this.data = res.data.goodsList;
                    if(res.data.page[0].total > 9) {
                        _this.totals = res.data.page[0].total;
                        _this.pagBool = true;
                    } else {
                        _this.pagBool = false;
                    }
                } else if(res.code == 404) {
                    _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
                }
            })
        },
        // 点击推荐，请求商品
        tuijian() {
            var _this = this;
            _this.pagBool = false;
            // _this.designBool = true;   //显示推荐商品
            _this.$get("designer/list").then(res=>{
                if(res.code == 200) {
                    _this.data = res.data.designerList;
                    if(res.data.total > 9) {
                    _this.totals = res.data.total;
                    _this.pagBool = true;
                    } else {
                    _this.pagBool = false;
                    }
                } else if(res.code == 404) {
                    _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
                }
            })
            // 推荐请求数据
            // _this.$get("goods/list").then((res)=>{
            //     if(res.code == 200) {
            //         if(res.data.goodsList.length == 0) {
            //             _this.$MessageAlert(true, _this.$t('share.Message.error'), 'error');  //没有数据
            //         }
            //         _this.data=res.data.goodsList;
            //     } else if(res.code == 404) {
            //         _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');  //没有数据
            //     }
            // })
        },
         // 全部设计师
        all() {
            
            console.log('推荐1')
            var _this = this;
            // _this.designBool = false;   //显示全部设计师
            // 获取全部设计师
            _this.$get("designer/list").then(res=>{
                if(res.code == 200) {
                    _this.data = res.data.designerList;
                    if(res.data.total > 9) {
                    _this.totals = res.data.total;
                    _this.pagBool = true;
                    } else {
                    _this.pagBool = false;
                    }
                } else if(res.code == 404) {
                    _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
                }
            })
        },
        // 分页监听当前所在页数
        handleCurrentChange(val) {
            var _this=this;
            _this.$get(`designer/list/${val}`).then(res=>{
                if(res.code == 200) {
                    _this.data = res.data.designerList;
                    if(res.data.total > 9) {
                        _this.totals = res.data.total;
                        _this.pagBool = true;
                    } else {
                        _this.pagBool = false;
                    }
                } else if(res.code == 404) {
                    _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
                }
            })
        },

    },
    created () {
        var _this=this;
        // 设计师分类导航栏，请求数据
        _this.$get(`goods/category/${_this.allID}`).then(res=>{
            if(res.code == 200) {
                _this.info = res.data;
            } else if(res.code == 404) {
                _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            }
        })
        // 推荐请求数据
        // 获取全部设计师
        _this.$get("designer/list").then(res=>{
            if(res.code == 200) {
                _this.data = res.data.designerList;
                if(res.data.total > 9) {
                _this.totals = res.data.total;
                _this.pagBool = true;
                } else {
                _this.pagBool = false;
                }
            } else if(res.code == 404) {
                _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            }
        })

    },
};
</script>

<style lang="less" scoped>

// 布局容器
.el-header {
    background-color: white!important;
    font-size: 0;
}
.el-header, .el-footer {
    color: #333;
    text-align: center;
    height: auto!important;
    padding: 0px;
}
.el-main {
    color: #333;
    padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
    min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}
// 布局容器结束
#stylist {
    min-width: 1140px;
}
.top_text {
        margin: 60px 0px;
        h1 {
            width: 1200px;
            margin: auto;
            text-indent: 3em;
            span {
                font-size: 42px;
                padding-bottom: 5px;
                border-bottom: 2px solid black;
                color: black;
                letter-spacing: 5px;
            }
        }
    }
.content_top {
    margin-bottom: 140px;
    .top_parentBox {
        margin: auto;
        width: 1200px;
        height: 550px;
        video {
            width: 100%;
            height: 100%;
        }
    }
}
.content_bottom {
    width: 65%;
    min-width: 1140px;
    margin: auto;
    h3 {
        margin-top: 90px;
        font-size: 30px;
        .border{
            display: inline-block;
            width: 30px;
            border-bottom:3px solid #E2B972;
            margin-left: 17px;
        }
    }
    .bottom_category{
        background-color: white;
        margin-top: 50px;
        padding: 20px;
    }
    .bottom_ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
        margin-bottom: 50px;
        li{
            // border-radius: 10px;
            width: 26%;
            margin-top: 50px;
            margin-bottom: 10px;
            transition-duration: 1s;
            
            overflow: hidden;
            img{
            // border-radius: 10px;

            height: 297px;
            width: 100%;
            }
            p {
                height: 60px;
                line-height: 50px;
                padding-top: 10px;
                padding-left: 15px;
                padding-right: 15px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin: 0px;
                font-size: 17px;
            }
            .ul_p {
                margin-bottom: 15px;
            }
            span {
                color: #E2B972;
                display: inline-block;
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
        li:hover{
            transform:translateY(-10px);
            transition-duration: 1.5s;
            box-shadow: 0px 8px 12px 3px #4E5454;
        }
    }
    .bottom_ul::after {
        content: '';
        display: block;
        width: 26%;
    }
    .more {
        display: block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0 auto;
        border: 1px solid #000;
    }
    .more:hover {
        color: #fff;
        background-color: #000;
    }
}
// 推荐
.tuijian {
    cursor:pointer;
}
// 类别
.category_title {
    font-size: 25px;
    font-weight: 700;
    margin: 0px;
    margin-bottom: 10px;
    padding: 20px 0px;
    border-bottom: 2px solid #ccc;
    text-indent: 1em;
}
.category_flex {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;
    .category_content {
        width: 25%;
        padding: 25px;
        .category_imgs {
            width: 130px;
            height: 130px;
            margin: auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .category_text {
            font-size: 17px;
            padding: 15px 0px;
        }
    }
}
.category_flex::after {
    content: '';
    display: block;
    flex: 1;
}
// 类别
.category_ul {
    border-bottom: 2px solid #ccc;
    height: 50px;
    width: 100%;
    line-height: 48px;
    display: flex;
    justify-content: space-around;
    li {
        display: inline-block;
        text-align: center;
        // min-width: 80px;
        color: #606266;
        font-size: 16px;
        span {
            font-size: 16px;
        }
    }
}
.dropdown_text {
    font-size: 16px !important;
}
.pagination{
    width: 100%;
    margin-top: 35px;
    margin-bottom: 45px;
    text-align: center;
}
/deep/ .el-pagination span:not([class*=suffix]){
    font-size: 15px;
}
/deep/ .el-pagination button{
    height: 30px;
}
/deep/ .el-pagination.is-background .btn-prev{
    min-width: 32px;
}
/deep/ .el-pager li{
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}
/deep/ .el-pagination.is-background .el-pager li{
    min-width: 32px;
}
/deep/ .el-pagination .btn-prev .el-icon{
    font-size: 18px;
}
/deep/ .el-pagination .btn-next .el-icon{
    font-size: 18px;
}
// @charset "utf-8";
// ::-webkit-scrollbar 
// { 
//   width: 5px; 
// }
  
// /*定义滚动条轨道 内阴影+圆角*/
// ::-webkit-scrollbar-track 
// { 
//   border-radius: 10px; 
//   background-color: rgba(0,0,0,0.1); 
// } 
  
// /*定义滑块 内阴影+圆角*/
// ::-webkit-scrollbar-thumb 
// { 
//   border-radius: 10px; 
//   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
//   background-color: rgba(0,0,0,0.1);
// } 
</style>